<template>
  <a-layout class="new-case-layout">
    <AppHeader activeKey="2" @logout="handleLogout" />

    <a-layout-content class="content">
      <div class="page-header">
        <div class="page-title">
          <router-link to="/dashboard">
            <a-button type="link" class="back-button">
              <template #icon><ArrowLeftOutlined /></template>
              返回工作台
            </a-button>
          </router-link>
          <h1>新建病例</h1>
        </div>
      </div>

      <div class="steps-container">
        <a-steps :current="currentStep" class="custom-steps">
          <a-step title="基本信息" />
          <a-step title="产品选择" />
          <a-step title="影像资料" />
          <a-step title="临床情况" />
        </a-steps>
      </div>

      <div class="form-container">
        <!-- Step 1: 基本信息 -->
        <div v-if="currentStep === 0" class="step-content">
          <h3 class="step-title">患者基本信息</h3>
          
          <a-form :model="formData" layout="vertical">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="姓名" name="name" required>
                  <a-input v-model:value="formData.name" placeholder="请输入患者姓名" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="性别" name="gender">
                  <a-select v-model:value="formData.gender" placeholder="请选择性别">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="出生日期" name="birthdate">
                  <a-date-picker 
                    v-model:value="formData.birthdate" 
                    style="width: 100%" 
                    placeholder="请选择出生日期"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系电话" name="phone" required>
                  <a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
                </a-form-item>
              </a-col>
            </a-row>
            
            <div class="divider-line"></div>
            
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="邮寄方式" name="deliveryMethod">
                  <a-select v-model:value="formData.deliveryMethod" placeholder="请选择邮寄方式">
                    <a-select-option value="顺丰">顺丰</a-select-option>
                    <a-select-option value="韵达">韵达</a-select-option>
                    <a-select-option value="圆通">圆通</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="收件人" name="recipient">
                  <a-input v-model:value="formData.recipient" placeholder="请输入收件人姓名" />
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="联系电话" name="recipientPhone">
                  <a-input v-model:value="formData.recipientPhone" placeholder="请输入收件人联系电话" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="收货地址" name="deliveryAddress">
                  <a-select v-model:value="formData.deliveryAddress" placeholder="请选择收货地址">
                    <a-select-option value="北京市/市辖区/东城区">北京市/市辖区/东城区</a-select-option>
                    <a-select-option value="上海市/市辖区/黄浦区">上海市/市辖区/黄浦区</a-select-option>
                    <a-select-option value="广州市/市辖区/越秀区">广州市/市辖区/越秀区</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="详细地址" name="detailedAddress">
                  <a-textarea 
                    v-model:value="formData.detailedAddress" 
                    placeholder="请输入详细地址" 
                    :rows="2" 
                  />
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="备注信息" name="remarks">
                  <a-textarea 
                    v-model:value="formData.remarks" 
                    placeholder="请输入备注信息" 
                    :rows="2" 
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- Step 2: 产品选择 -->
        <div v-if="currentStep === 1" class="step-content">
          <h3 class="step-title">产品选择</h3>
          
          <div class="product-cards">
            <div 
              v-for="(product, index) in products" 
              :key="index"
              class="product-card"
              :class="{ selected: selectedProduct === index }"
              @click="selectProduct(index)"
            >
              <div class="product-title">{{ product.title }}</div>
              <div class="product-price">价格: <span>{{ product.price }}</span></div>
              <div class="service-period">服务周期: <span>{{ product.period }}</span></div>
              <ul class="product-features">
                <li v-for="(feature, idx) in product.features" :key="idx">
                  <span>{{ feature }}</span>
                </li>
              </ul>
              <a-button 
                type="primary" 
                class="select-button"
                @click.stop="confirmSelection(index)"
              >
                选择
              </a-button>
            </div>
          </div>
        </div>

        <!-- Step 3: 影像资料 -->
        <div v-if="currentStep === 2" class="step-content">
          <h3 class="step-title">影像资料</h3>
          
          <!-- 颌位选择 -->
          <div class="image-section">
            <div class="section-title">颌位选择</div>
            <div class="jaw-position-selector">
              <a-radio-group v-model:value="selectedJawPosition" class="jaw-radio-group">
                <a-radio-button value="正中">正中</a-radio-button>
                <a-radio-button value="上颌">上颌</a-radio-button>
                <a-radio-button value="下颌">下颌</a-radio-button>
              </a-radio-group>
              <div class="jaw-position-note">
                注意：初始咬合状态，上颌牙弓与下颌牙弓的相对位置
              </div>
            </div>
          </div>
          
          <!-- 补充说明 -->
          <div class="image-section">
            <div class="section-title">补充说明</div>
            <a-textarea 
              v-model:value="imageNotes" 
              :rows="4" 
              placeholder="可填写补充说明"
            />
          </div>
          
          <!-- 牙位图表 -->
          <div class="image-section">
            <div class="section-title">牙位图表：下方为牙位图表，左方为患者右侧，右方为患者左侧，中线为分界线</div>
            <div class="teeth-chart">
              <div class="teeth-chart-container">
                <div class="teeth-chart-row">
                  <!-- 上颌牙位 -->
                  <div v-for="num in [55, 54, 53, 52, 51, 61, 62, 63, 64, 65]" :key="num" 
                    class="tooth-number"
                    :class="{ 'selected-tooth': selectedTeeth.includes(num) }"
                    @click="toggleTooth(num)">
                    {{ num }}
                  </div>
                </div>
                <div class="teeth-chart-row">
                  <!-- 下颌牙位 -->
                  <div v-for="num in [85, 84, 83, 82, 81, 71, 72, 73, 74, 75]" :key="num" 
                    class="tooth-number"
                    :class="{ 'selected-tooth': selectedTeeth.includes(num) }"
                    @click="toggleTooth(num)">
                    {{ num }}
                  </div>
                </div>
              </div>
            </div>
            <div class="teeth-chart-description">
              不可移动的牙齿：特殊情况下，有些牙齿不能移动，请在上方牙位图中点击选择
            </div>
          </div>
          
          <!-- 面像照片 -->
          <div class="image-section">
            <div class="section-title">面像照片</div>
            <div class="image-upload-grid">
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('face', 'front')">
                  <div v-if="!imageData.face.front" class="upload-placeholder">
                    <upload-outlined />
                    <div>正面</div>
                  </div>
                  <img v-else :src="imageData.face.front" alt="正面照" class="uploaded-image" />
                </div>
                <div class="image-caption">正面</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('face', 'side')">
                  <div v-if="!imageData.face.side" class="upload-placeholder">
                    <upload-outlined />
                    <div>侧面</div>
                  </div>
                  <img v-else :src="imageData.face.side" alt="侧面照" class="uploaded-image" />
                </div>
                <div class="image-caption">侧面</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('face', 'smile')">
                  <div v-if="!imageData.face.smile" class="upload-placeholder">
                    <upload-outlined />
                    <div>微笑</div>
                  </div>
                  <img v-else :src="imageData.face.smile" alt="微笑照" class="uploaded-image" />
                </div>
                <div class="image-caption">微笑</div>
              </div>
            </div>
          </div>
          
          <!-- 口内照片 - 上颌 -->
          <div class="image-section">
            <div class="section-title">口内照片 - 上颌</div>
            <div class="image-upload-grid">
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('upperJaw', 'front')">
                  <div v-if="!imageData.upperJaw.front" class="upload-placeholder">
                    <upload-outlined />
                    <div>前牙区域</div>
                  </div>
                  <img v-else :src="imageData.upperJaw.front" alt="上颌前牙区域" class="uploaded-image" />
                </div>
                <div class="image-caption">前牙区域</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('upperJaw', 'rightSide')">
                  <div v-if="!imageData.upperJaw.rightSide" class="upload-placeholder">
                    <upload-outlined />
                    <div>右侧区域</div>
                  </div>
                  <img v-else :src="imageData.upperJaw.rightSide" alt="上颌右侧区域" class="uploaded-image" />
                </div>
                <div class="image-caption">右侧区域</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('upperJaw', 'leftSide')">
                  <div v-if="!imageData.upperJaw.leftSide" class="upload-placeholder">
                    <upload-outlined />
                    <div>左侧区域</div>
                  </div>
                  <img v-else :src="imageData.upperJaw.leftSide" alt="上颌左侧区域" class="uploaded-image" />
                </div>
                <div class="image-caption">左侧区域</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('upperJaw', 'occlusal')">
                  <div v-if="!imageData.upperJaw.occlusal" class="upload-placeholder">
                    <upload-outlined />
                    <div>咬合面</div>
                  </div>
                  <img v-else :src="imageData.upperJaw.occlusal" alt="上颌咬合面" class="uploaded-image" />
                </div>
                <div class="image-caption">咬合面</div>
              </div>
            </div>
          </div>
          
          <!-- 口内照片 - 下颌 -->
          <div class="image-section">
            <div class="section-title">口内照片 - 下颌</div>
            <div class="image-upload-grid">
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('lowerJaw', 'front')">
                  <div v-if="!imageData.lowerJaw.front" class="upload-placeholder">
                    <upload-outlined />
                    <div>前牙区域</div>
                  </div>
                  <img v-else :src="imageData.lowerJaw.front" alt="下颌前牙区域" class="uploaded-image" />
                </div>
                <div class="image-caption">前牙区域</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('lowerJaw', 'rightSide')">
                  <div v-if="!imageData.lowerJaw.rightSide" class="upload-placeholder">
                    <upload-outlined />
                    <div>右侧区域</div>
                  </div>
                  <img v-else :src="imageData.lowerJaw.rightSide" alt="下颌右侧区域" class="uploaded-image" />
                </div>
                <div class="image-caption">右侧区域</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('lowerJaw', 'leftSide')">
                  <div v-if="!imageData.lowerJaw.leftSide" class="upload-placeholder">
                    <upload-outlined />
                    <div>左侧区域</div>
                  </div>
                  <img v-else :src="imageData.lowerJaw.leftSide" alt="下颌左侧区域" class="uploaded-image" />
                </div>
                <div class="image-caption">左侧区域</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('lowerJaw', 'occlusal')">
                  <div v-if="!imageData.lowerJaw.occlusal" class="upload-placeholder">
                    <upload-outlined />
                    <div>咬合面</div>
                  </div>
                  <img v-else :src="imageData.lowerJaw.occlusal" alt="下颌咬合面" class="uploaded-image" />
                </div>
                <div class="image-caption">咬合面</div>
              </div>
            </div>
          </div>
          
          <!-- 前牙咬合关系照片 -->
          <div class="image-section">
            <div class="section-title">前牙咬合关系照片</div>
            <div class="image-upload-grid">
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('occlusion', 'front')">
                  <div v-if="!imageData.occlusion.front" class="upload-placeholder">
                    <upload-outlined />
                    <div>正中</div>
                  </div>
                  <img v-else :src="imageData.occlusion.front" alt="正中咬合" class="uploaded-image" />
                </div>
                <div class="image-caption">正中</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('occlusion', 'rightSide')">
                  <div v-if="!imageData.occlusion.rightSide" class="upload-placeholder">
                    <upload-outlined />
                    <div>右侧</div>
                  </div>
                  <img v-else :src="imageData.occlusion.rightSide" alt="右侧咬合" class="uploaded-image" />
                </div>
                <div class="image-caption">右侧</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('occlusion', 'leftSide')">
                  <div v-if="!imageData.occlusion.leftSide" class="upload-placeholder">
                    <upload-outlined />
                    <div>左侧</div>
                  </div>
                  <img v-else :src="imageData.occlusion.leftSide" alt="左侧咬合" class="uploaded-image" />
                </div>
                <div class="image-caption">左侧</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('occlusion', 'overjet')">
                  <div v-if="!imageData.occlusion.overjet" class="upload-placeholder">
                    <upload-outlined />
                    <div>覆盖</div>
                  </div>
                  <img v-else :src="imageData.occlusion.overjet" alt="覆盖咬合" class="uploaded-image" />
                </div>
                <div class="image-caption">覆盖</div>
              </div>
            </div>
          </div>
          
          <!-- 其他照片 -->
          <div class="image-section">
            <div class="section-title">其他照片</div>
            <div class="image-upload-grid">
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('other', 'xray')">
                  <div v-if="!imageData.other.xray" class="upload-placeholder">
                    <upload-outlined />
                    <div>X光片</div>
                  </div>
                  <img v-else :src="imageData.other.xray" alt="X光片" class="uploaded-image" />
                </div>
                <div class="image-caption">X光片</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('other', 'ceph')">
                  <div v-if="!imageData.other.ceph" class="upload-placeholder">
                    <upload-outlined />
                    <div>侧位片</div>
                  </div>
                  <img v-else :src="imageData.other.ceph" alt="侧位片" class="uploaded-image" />
                </div>
                <div class="image-caption">侧位片</div>
              </div>
              
              <div class="image-upload-item">
                <div class="image-upload-box" @click="handleImageUpload('other', 'scan')">
                  <div v-if="!imageData.other.scan" class="upload-placeholder">
                    <upload-outlined />
                    <div>3D设计扫描数据</div>
                  </div>
                  <img v-else :src="imageData.other.scan" alt="3D设计扫描数据" class="uploaded-image" />
                </div>
                <div class="image-caption">3D设计扫描数据</div>
              </div>
            </div>
          </div>
          
          <input 
            type="file" 
            ref="imageUploader" 
            style="display: none" 
            accept="image/*" 
            @change="onImageSelected"
          />
        </div>
        
        <!-- Step 4: 临床情况 -->
        <div v-if="currentStep === 3" class="step-content">
          <h3 class="step-title">临床情况</h3>
          
          <!-- 安氏分类 -->
          <div class="clinical-section">
            <div class="section-title">安氏分类（选填）</div>
            <div class="tag-container">
              <a-tag 
                v-for="(tag, index) in anshiOptions" 
                :key="index"
                :class="{ 'selected-tag': selectedAnshi.includes(tag) }"
                @click="toggleSelection(tag, 'anshi')"
                class="clickable-tag"
              >
                {{ tag }}
              </a-tag>
            </div>
            <a-input 
              placeholder="如有其他情况可在此备注" 
              v-model:value="clinicalData.anshiNotes"
            />
          </div>
          
          <!-- 牙齿问题 -->
          <div class="clinical-section">
            <div class="section-title">牙齿问题（选填）</div>
            <div class="tag-container">
              <a-tag 
                v-for="(tag, index) in teethProblemOptions" 
                :key="index"
                :class="{ 'selected-tag': selectedTeethProblems.includes(tag) }"
                @click="toggleSelection(tag, 'teeth')"
                class="clickable-tag"
              >
                {{ tag }}
              </a-tag>
            </div>
            <a-input 
              placeholder="如有其他情况可在此备注" 
              v-model:value="clinicalData.teethNotes"
            />
          </div>
          
          <!-- 牙弓问题 -->
          <div class="clinical-section">
            <div class="section-title">牙弓问题（选填）</div>
            <div class="tag-container">
              <a-tag 
                v-for="(tag, index) in archProblemOptions" 
                :key="index"
                :class="{ 'selected-tag': selectedArchProblems.includes(tag) }"
                @click="toggleSelection(tag, 'arch')"
                class="clickable-tag"
              >
                {{ tag }}
              </a-tag>
            </div>
            <a-input 
              placeholder="如有其他情况可在此备注" 
              v-model:value="clinicalData.archNotes"
            />
          </div>
          
          <!-- 牙位选择 -->
          <div class="clinical-section">
            <div class="section-title">牙位选择：下方选择你认为需要关注的牙位，请在左下方和右上方的牙位图中点击选择</div>
            <div class="dental-chart">
              <div class="dental-chart-description">
                下方牙位图中，左方为患者右侧，右方为患者左侧，中线为分界线
              </div>
              <div class="dental-chart-container">
                <div class="dental-chart-row">
                  <!-- 上颌右侧 -->
                  <div class="dental-chart-quadrant upper-right">
                    <div 
                      v-for="num in [18, 17, 16, 15, 14, 13, 12, 11]" 
                      :key="num"
                      class="tooth-circle"
                      :class="{ 'selected-tooth': selectedTeeth.includes(num) }"
                      @click="toggleTooth(num)"
                    >
                      {{ num }}
                    </div>
                  </div>
                  <!-- 上颌左侧 -->
                  <div class="dental-chart-quadrant upper-left">
                    <div 
                      v-for="num in [21, 22, 23, 24, 25, 26, 27, 28]" 
                      :key="num"
                      class="tooth-circle"
                      :class="{ 'selected-tooth': selectedTeeth.includes(num) }"
                      @click="toggleTooth(num)"
                    >
                      {{ num }}
                    </div>
                  </div>
                </div>
                <div class="dental-chart-divider"></div>
                <div class="dental-chart-row">
                  <!-- 下颌右侧 -->
                  <div class="dental-chart-quadrant lower-right">
                    <div 
                      v-for="num in [48, 47, 46, 45, 44, 43, 42, 41]" 
                      :key="num"
                      class="tooth-circle"
                      :class="{ 'selected-tooth': selectedTeeth.includes(num) }"
                      @click="toggleTooth(num)"
                    >
                      {{ num }}
                    </div>
                  </div>
                  <!-- 下颌左侧 -->
                  <div class="dental-chart-quadrant lower-left">
                    <div 
                      v-for="num in [31, 32, 33, 34, 35, 36, 37, 38]" 
                      :key="num"
                      class="tooth-circle"
                      :class="{ 'selected-tooth': selectedTeeth.includes(num) }"
                      @click="toggleTooth(num)"
                    >
                      {{ num }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 过敏史 -->
          <div class="clinical-section">
            <div class="section-title">过敏史</div>
            <div class="radio-group">
              <a-radio-group v-model:value="clinicalData.allergy">
                <a-radio value="有">有</a-radio>
                <a-radio value="无">无</a-radio>
              </a-radio-group>
            </div>
          </div>
          
          <!-- 遗传史 -->
          <div class="clinical-section">
            <div class="section-title">遗传史</div>
            <div class="radio-group">
              <a-radio-group v-model:value="clinicalData.genetic">
                <a-radio value="有">有</a-radio>
                <a-radio value="无">无</a-radio>
              </a-radio-group>
            </div>
          </div>
          
          <!-- 颞下颌关节 -->
          <div class="clinical-section">
            <div class="section-title">颞下颌关节</div>
            <div class="radio-group">
              <a-radio-group v-model:value="clinicalData.tmj">
                <a-radio value="正常">正常</a-radio>
                <a-radio value="上颌">上颌</a-radio>
                <a-radio value="下颌">下颌</a-radio>
              </a-radio-group>
            </div>
          </div>
          
          <!-- 特殊情况 -->
          <div class="clinical-section">
            <div class="section-title">特殊情况（请以逗号分隔不同项，如：高血压，糖尿病，中枢神下颌关节紊乱综合征等）</div>
            <a-textarea 
              v-model:value="clinicalData.specialNotes" 
              :rows="4" 
              placeholder="请输入特殊情况"
            />
          </div>
        </div>
      </div>

      <div class="form-actions">
        <div class="left-actions">
          <a-button 
            v-if="currentStep > 0" 
            @click="prevStep"
          >
            上一步
          </a-button>
        </div>
        <div class="right-actions">
          <a-button 
            v-if="currentStep < 3" 
            type="primary" 
            @click="nextStep"
          >
            下一步
          </a-button>
          <a-button 
            v-else
            type="primary" 
            @click="submitForm"
          >
            提交
          </a-button>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { 
  UserOutlined,
  QuestionCircleOutlined,
  InfoCircleOutlined,
  ArrowLeftOutlined,
  UploadOutlined
} from '@ant-design/icons-vue'
import AppHeader from '../components/AppHeader.vue'
import { message } from 'ant-design-vue'

const router = useRouter()
const currentStep = ref(0)

// 产品数据
const products = [
  {
    title: '牙之初-乳牙版',
    price: '¥6,800',
    period: '1年',
    features: [
      '适用于儿童乳牙期（3-6岁）的各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期1年。',
      '包含4次复诊。'
    ]
  },
  {
    title: '牙之初-替牙版',
    price: '¥12,800',
    period: '2年',
    features: [
      '适用于儿童替牙期（6-12岁）的各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期2年。',
      '不限回访次数。',
      '包含专业口腔检查和评估。'
    ]
  },
  {
    title: '牙之初Plus',
    price: '¥18,800',
    period: '3年',
    features: [
      '适用于儿童乳牙和替牙期（3-12岁）各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期3年。',
      '不限回访次数。',
      '包含专业口腔检查和评估。',
      '提供个性化治疗计划。'
    ]
  },
  {
    title: '牙之初Pro',
    price: '¥25,800',
    period: '5年',
    features: [
      '适用于儿童恒牙期（6-16岁）各类错颌畸形。提供矫治方案。',
      '套餐包括传统的矫治治疗，硅胶矫治器，固定矫治器。',
      '服务周期5年。',
      '不限回访次数。',
      '包含专业口腔检查和评估。',
      '提供个性化治疗计划。',
      '包含全面的口腔健康管理。'
    ]
  },
  {
    title: '牙之初Premium',
    price: '¥36,800',
    period: '终身',
    features: [
      '适用于各年龄段的各类错颌畸形。提供全面矫治方案。',
      '套餐包括所有类型的矫治器和治疗方法。',
      '终身服务。',
      '不限回访次数。',
      '包含专业口腔检查和评估。',
      '提供个性化治疗计划。',
      '包含全面的口腔健康管理和定期随访。'
    ]
  }
]

// 颌位选择
const selectedJawPosition = ref('正中')
const imageNotes = ref('')

// 图片数据
const imageData = reactive({
  face: {
    front: null,
    side: null,
    smile: null
  },
  upperJaw: {
    front: null,
    rightSide: null,
    leftSide: null,
    occlusal: null
  },
  lowerJaw: {
    front: null,
    rightSide: null,
    leftSide: null,
    occlusal: null
  },
  occlusion: {
    front: null,
    rightSide: null,
    leftSide: null,
    overjet: null
  },
  other: {
    xray: null,
    ceph: null,
    scan: null
  }
})

// 当前选择的图片上传类型和位置
const currentImageUpload = ref({
  section: '',
  position: ''
})

// 文件上传器引用
const imageUploader = ref(null)

// 处理图片上传点击
const handleImageUpload = (section, position) => {
  currentImageUpload.value = {
    section,
    position
  }
  if (imageUploader.value) {
    imageUploader.value.click()
  }
}

// 处理图片选择
const onImageSelected = (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  const reader = new FileReader()
  reader.onload = (e) => {
    const { section, position } = currentImageUpload.value
    if (section && position) {
      imageData[section][position] = e.target.result
    }
  }
  reader.readAsDataURL(file)
  
  // 重置文件输入，允许选择相同的文件
  event.target.value = ''
}

// 选择的产品
const selectedProduct = ref(null)

// 安氏分类选项
const anshiOptions = [
  '安氏I类',
  '安氏II类',
  '安氏II类1分类',
  '安氏II类2分类',
  '安氏III类',
  '不确定'
]

// 牙齿问题选项
const teethProblemOptions = [
  '乳牙早失',
  '反颌',
  '深覆颌',
  '开颌',
  '牙列拥挤',
  '间隙',
  '上前牙前突',
  '下前牙前突',
  '反合',
  '锁颌',
  '牙齿缺失',
  '多生牙'
]

// 牙弓问题选项
const archProblemOptions = [
  '窄颌',
  '偏颌',
  '前牙反牙合',
  '后牙反牙合',
  '前牙开牙合',
  '后牙开牙合',
  '前牙深覆盖',
  '后牙深覆盖',
  '上颌前突',
  '下颌前突',
  '上颌后缩',
  '下颌后缩',
  '上颌狭窄',
  '下颌狭窄',
  '上颌扩大',
  '下颌扩大'
]

// 选择的标签
const selectedAnshi = ref([])
const selectedTeethProblems = ref([])
const selectedArchProblems = ref([])

// 牙位选择
const selectedTeeth = ref([])

// 临床情况数据
const clinicalData = reactive({
  anshiNotes: '',
  teethNotes: '',
  archNotes: '',
  allergy: '无',
  genetic: '无',
  tmj: '正常',
  specialNotes: ''
})

// 表单数据
const formData = reactive({
  name: '',
  gender: undefined,
  birthdate: null,
  phone: '',
  allergies: '',
  medicalHistory: '',
  chiefComplaint: '',
  presentIllness: '',
  initialDiagnosis: '',
  deliveryMethod: undefined,
  recipient: '',
  recipientPhone: '',
  deliveryAddress: undefined,
  detailedAddress: '',
  remarks: '',
  teethNotes: '',
  tmjLeft: '无',
  tmjRight: '无',
  jawRelation: '正常',
  receiver: '',
  receiverPhone: '',
  receiverAddress: '',
  treatmentAddress: '',
  caseNotes: '',
  doctorNotes: ''
})

const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++
    window.scrollTo(0, 0)
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
    window.scrollTo(0, 0)
  }
}

const selectProduct = (index) => {
  selectedProduct.value = index
}

const confirmSelection = (index) => {
  selectedProduct.value = index
  message.success(`已选择 ${products[index].title}`)
}

const toggleSelection = (tag, type) => {
  let targetArray
  
  switch (type) {
    case 'anshi':
      targetArray = selectedAnshi
      break
    case 'teeth':
      targetArray = selectedTeethProblems
      break
    case 'arch':
      targetArray = selectedArchProblems
      break
    default:
      return
  }
  
  const index = targetArray.value.indexOf(tag)
  if (index === -1) {
    // 安氏分类只能选一个
    if (type === 'anshi') {
      targetArray.value = [tag]
    } else {
      targetArray.value.push(tag)
    }
  } else {
    targetArray.value.splice(index, 1)
  }
}

const toggleTooth = (toothNumber) => {
  const index = selectedTeeth.value.indexOf(toothNumber)
  if (index === -1) {
    selectedTeeth.value.push(toothNumber)
  } else {
    selectedTeeth.value.splice(index, 1)
  }
}

const submitForm = () => {
  // 这里可以添加表单验证逻辑
  console.log('提交表单数据:', formData)
  console.log('选中的产品:', selectedProduct.value)
  console.log('选中的安氏分类:', selectedAnshi.value)
  console.log('选中的牙齿问题:', selectedTeethProblems.value)
  console.log('选中的牙弓问题:', selectedArchProblems.value)
  console.log('选中的牙位:', selectedTeeth.value)
  console.log('其他输入:', clinicalData)
  
  // 模拟提交成功
  message.success('病例创建成功')
  
  // 跳转回工作台
  setTimeout(() => {
    router.push('/dashboard')
  }, 1500)
}

// 处理退出登录
const handleLogout = () => {
  router.push('/login')
}
</script>

<style scoped>
.new-case-layout {
  min-height: 100vh;
}

.content {
  padding-top: 64px; /* Add padding to account for fixed header */
  margin-top: 64px;
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  display: flex;
  align-items: center;
}

.page-title h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.back-button {
  padding: 0;
  margin-right: 16px;
}

.steps-container {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.custom-steps :deep(.ant-steps-item-title) {
  font-size: 16px;
}

.form-container {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #262626;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
}

.product-card {
  width: 230px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.product-card.selected {
  border: 2px solid #1890ff;
  transform: translateY(-5px);
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
  margin-bottom: 10px;
}

.service-period {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.product-features {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
  flex-grow: 1;
}

.product-features li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.select-button {
  align-self: center;
  width: 100%;
}

.image-section {
  margin-bottom: 25px;
}

.jaw-position-selector {
  margin-bottom: 15px;
}

.jaw-radio-group {
  margin-bottom: 10px;
}

.jaw-position-note {
  font-size: 14px;
  color: #ff4d4f;
  margin-top: 5px;
}

.teeth-chart {
  margin: 15px 0;
  border: 1px solid #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  background-color: #fafafa;
}

.teeth-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.teeth-chart-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tooth-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  font-size: 12px;
  cursor: pointer;
}

.tooth-number.selected-tooth {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.teeth-chart-description {
  font-size: 14px;
  color: #ff4d4f;
  margin-top: 10px;
}

.image-upload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.image-upload-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.image-upload-box {
  width: 140px;
  height: 140px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fafafa;
  overflow: hidden;
  transition: all 0.3s;
}

.image-upload-box:hover {
  border-color: #1890ff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.upload-placeholder .anticon {
  font-size: 24px;
  margin-bottom: 8px;
}

.image-caption {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinical-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
}

.clickable-tag {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s;
  user-select: none;
}

.selected-tag {
  background-color: #1890ff !important;
  color: white !important;
  border-color: #1890ff !important;
}

.radio-group {
  margin-bottom: 15px;
}

.dental-chart {
  margin-bottom: 20px;
}

.dental-chart-description {
  font-size: 14px;
  color: #ff4d4f;
  margin-top: 10px;
}

.dental-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  background-color: #fafafa;
}

.dental-chart-row {
  display: flex;
  width: 100%;
  justify-content: center;
}

.dental-chart-quadrant {
  display: flex;
  flex: 1;
  justify-content: center;
}

.upper-right, .lower-right {
  flex-direction: row-reverse;
}

.upper-left, .lower-left {
  flex-direction: row;
}

.dental-chart-divider {
  width: 80%;
  height: 1px;
  background-color: #d9d9d9;
  margin: 10px 0;
}

.tooth-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  cursor: pointer;
  background-color: white;
  transition: all 0.3s;
}

.tooth-circle.selected-tooth {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}
</style>
